<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 1034 1024"
    preserveAspectRatio="xMidYMid meet"
    fill=""
    role="presentation"
    ref="host"
  >
    <g><path d="M365.394 778.926c-12.288 0-25.6-3.42-39.588-10.24-50.862-24.576-97.628-51.548-99.676-52.572-9.892-5.796-13.312-18.084-7.506-27.986 5.806-9.902 18.094-13.312 27.986-7.506.348.338 47.452 27.3 96.942 51.2 12.288 5.796 22.19 7.506 28.672 4.772 5.806-2.386 8.192-7.844 8.192-7.844.686-2.048 2.048-4.096 3.41-5.806 4.782-5.458 4.096-9.216 3.758-10.578-1.71-9.902-15.36-21.504-21.842-25.6-.686-.348-1.372-1.024-2.048-1.372L294.4 630.446c-.338 0-.338-.348-.686-.348-44.37-38.226-81.234-37.202-82.596-37.202-68.956 3.072-136.54-14.336-139.264-15.022-10.926-2.724-17.408-13.988-14.684-24.914 2.734-10.926 13.998-17.408 24.924-14.674.676 0 64.512 16.722 126.976 13.65 1.7 0 53.248-2.734 110.93 46.766l68.27 53.924c6.82 4.444 34.816 24.238 39.588 52.91 1.71 10.24 1.024 25.262-10.916 40.96-3.42 6.83-11.95 20.818-29.696 27.986-6.492 3.072-13.998 4.444-21.852 4.444z" data-follow-fill="#0389FF" :fill="_fill"/><path d="M375.634 876.882c-40.274 0-90.45-7.506-137.216-35.154l-15.36-9.216C143.534 785.07 116.91 769.024 30.546 742.4c-10.916-3.41-16.722-14.674-13.65-25.6 3.072-10.926 14.674-16.722 25.6-13.65 90.798 27.986 120.832 46.08 201.39 93.86l15.36 9.216c83.282 49.5 183.972 21.504 184.996 21.166.686-.338 1.372-.338 2.048-.338l109.916-20.142c.676 0 51.2-9.554 48.466-37.202-2.386-25.262-25.262-26.286-32.082-26.286H418.304c-11.264 0-20.48-9.216-20.48-20.48s9.216-20.48 20.48-20.48H570.88c27.648-1.362 69.97 14.336 74.414 63.15 4.772 52.9-51.548 76.452-82.268 81.572L454.482 866.99c-6.482 2.048-37.54 9.892-78.848 9.892zM951.808 486.4c-1.71 0-3.41-.338-5.12-.686-1.024-.338-64.85-16.722-126.976-13.65-1.71 0-53.248 2.734-110.93-46.766l-68.27-53.924c-6.83-4.444-34.816-24.238-39.598-52.91-1.7-10.24-1.024-25.262 10.926-40.96 3.41-6.83 11.95-20.818 29.696-27.986 17.746-7.168 38.574-5.12 61.778 5.796 50.524 24.576 97.628 51.548 99.676 52.572 9.892 5.458 13.312 18.084 7.506 27.986a20.214 20.214 0 0 1-27.986 7.506c-.348-.338-47.79-27.3-96.942-51.2-11.95-5.796-21.842-7.506-28.334-5.12-5.458 2.048-8.192 7.168-8.868 8.192-.686 2.396-1.71 3.758-3.42 5.806-4.772 5.806-4.096 9.216-3.748 10.578 1.7 9.564 15.012 21.166 21.842 25.6.686.348 1.362 1.024 2.048 1.372l69.294 54.948c.338 0 .338.348.676.348 44.38 38.226 80.896 37.202 82.606 37.202 68.946-3.072 136.53 14.336 139.264 15.022 10.926 2.724 17.408 13.988 14.674 24.914a20.395 20.395 0 0 1-19.794 15.36z" data-follow-fill="#0389FF" :fill="_fill"/><path d="M992.768 321.874c-2.048 0-4.096-.338-6.144-1.024-90.112-27.648-119.808-45.394-199.342-92.836l-17.746-10.588c-83.968-49.828-183.982-21.504-185.006-21.156-.676.338-1.362.338-2.048.338L472.576 216.75c-.686 0-51.2 9.554-48.466 37.202 2.386 25.262 25.252 26.286 32.082 26.286h154.286c11.264 0 20.48 9.216 20.48 20.48s-9.216 20.48-20.48 20.48H457.902c-27.648 1.362-69.98-14.336-74.414-63.15-4.782-52.91 51.538-76.462 82.258-81.582l108.544-19.794c12.974-3.41 121.18-30.72 216.064 25.6l17.756 10.578c78.5 46.766 104.786 62.464 190.464 88.75 10.916 3.41 16.722 14.674 13.65 25.6-2.734 8.878-10.578 14.674-19.456 14.674zm-501.76 318.464c-1.024 0-2.048-.338-3.072-1.024L366.418 534.866c-23.89-20.48-32.42-53.586-21.504-83.62 10.588-29.358 36.188-47.79 66.908-48.476h1.362c31.744 0 61.44 16.732 77.824 43.356 16.384-26.624 46.08-43.356 77.824-43.356h1.362c30.72.348 56.32 19.118 66.908 48.476 10.916 30.034 2.386 62.802-21.504 83.62L494.08 638.976c-.686 1.024-2.048 1.362-3.072 1.362z" data-follow-fill="#0389FF" :fill="_fill"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class Icona1 extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
